<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>书籍列表</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>

<div  id="app" class="container">

    <h3>书籍列表</h3>
    <hr>

    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="glyphicon glyphicon-search"></span>
        </div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label>书名</label>
                    <input type="text" class="form-control" v-model="queryParams.name" placeholder="书名">
                </div>
                <div class="form-group">
                    <label>作者</label>
                    <input type="text" class="form-control" v-model="queryParams.author" placeholder="作者">
                </div>
                <button type="button" class="btn btn-primary" @click="doSearch">查询</button>
                <a href="book-save.html" class="btn btn-primary">添加书籍</a>
            </form>
        </div>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr class="active">
            <th>序号</th>
            <th>书名</th>
            <th>作者</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--使用Vue的v-for指令迭代数组-->
        <tr v-for="book in bookList">
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.author}}</td>
            <td>{{book.price}}</td>
            <td>
                <a :href="'book-update.html?'+ book.id" class="btn btn-info">修改</a>
                <button class="btn btn-danger" @click="doDelete(book.id)">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

    <div class="text-center form-inline">
        <ul class="pagination">
            <li><a href="#" @click.prevent="doJumpPage(queryParams.currentPage-1)">&laquo;</a></li>
            <!--遍历页码-->
            <li v-for="i in pages" :class="{'active':i===queryParams.currentPage}">
                <a href="#" @click.prevent="doJumpPage(i)">{{i}}</a>
            </li>
            <li><a href="#" @click.prevent="doJumpPage(queryParams.currentPage+1)">&raquo;</a></li>
            <li>
                <select class="form-control"
                                style="margin-left:10px"
                                v-model="queryParams.pageSize"
                                @change="doPageSizeChange">
                    <option value="2">2</option>
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                </select>
            </li>
        </ul>
    </div>

</div>

<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data: {
            queryParams: {
                currentPage: 1,//当前页
                pageSize: 10,//页大小 每页显示数量
                name: '',
                author: ''
            },
            pages:0,//总页数
            bookList: [],

        },
        methods: {
            //加载书籍列表数据
            loadBookList() {
                $.get('/book/page',this.queryParams,function (result) {
                    vm.bookList = result.data.records;
                    vm.pages = result.data.pages;

                })
            },
            //处理查询事件
            doSearch() {
                this.loadBookList();
            },
            //处理页大小改变事件
            doPageSizeChange() {
                this.loadBookList();
            },
            //处理跳页事件
            doJumpPage(i) {
                i = Math.max(1,i);
                i = Math.min(this.pages,i);
                this.queryParams.currentPage = i;
                this.loadBookList();
            },
            //处理删除事件
            doDelete(id){
                if (!confirm('确认要删除该记录吗？')){
                    return;
                }
                $.post('/book/delete',{id:id},function (result) {
                    if (result.code === 0){
                        //解决最后一页最后条一条记录删除后重新加载列表没有数据的问题
                        if (vm.bookList.length === 1 && vm.queryParams.currentPage > 1){
                            vm.queryParams.currentPage--
                        }
                        vm.loadBookList();
                    }else {
                        alert(result.msg);
                    }
                })
            }
        },
        created:function () {
            //当Vue实例创建完毕就去加载书籍列表
            this.loadBookList();
        }
    })
</script>

</body>
</html>